<template>
  <transition name="yun-message-fade" @after-leave="handleAfterLeave">
    <div
      :class="[
        'yun-message',
        type && !iconClass ? `yun-message--${ type }`:'',
        center ? 'is-center' : '',
        showClose ? 'is-closable' : '',
        customClass
      ]"
      :style = positionStyle
      v-show="visible"
      @mouseenter="clearTimer"
      @mouseleave="startTimer"
      role="alert"
    >
      <i :class="iconClass" v-if="iconClass"></i>
      <i :class="typeClass" v-else></i>
      <slot>
        <p v-if="!dangerouslyUseHTMLString" class=" yun-message__content">{{message}}</p>
        <div v-else v-html="message" class="yun-message__content"></div>
      </slot>
      <i v-if="showClose" class="yun-message__closeBtn yun-icon-close" @click="close"></i>
    </div>
  </transition>
</template>


<script>
  const typeMap = {
    success:'success',
    info:'info',
    warning:'warning',
    error:'error'
  };


  export default {
    data(){
      return {
        visible:false,
        message:'',
        duration:1000,
        type:'info',
        iconClass:'',
        customClass:'',
        onClose:null,
        showClose:false,
        closed:false,
        verticalOffset:20,
        timer:null,
        dangerouslyUseHTMLString:false,
        center:false
      }
    },
    methods: {

      //
      handleAfterLeave(){
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },

      //  关闭消息
      close(){
        this.closed = true;
        if(typeof this.onClose === 'function') {
          this.onClose(this);
        }
      },


      // 清除定时器
      clearTimer() {
        clearTimeout(this.timer);
      },


      // 消息定时关闭
      startTimer() {
        if(this.duration > 0) {
          this.timer = setTimeout(()=>{
            if(!this.closed) {
              this.close()
            }
          },this.duration)
        }
      },

      //  监听esc键关闭消息
      keydown(e) {
        if(e.keyCode === 27){
          if(!this.closed){
            this.close();
          }
        }
      }
    },


    computed:{
      typeClass(){
        return this.type && !this.iconClass
          ? `yun-message__icon iconfont yun-icon--${typeMap[this.type]}`
          :'';
      },

      positionStyle(){
        return {
          'top':`${this.verticalOffset}px`
        };
      }
    },

    watch: {
      closed(newVal) {
        if (newVal) {
          this.visible = false;
        }
      }
    },


    mounted() {
      this.startTimer();
      document.addEventListener('keydown',this.keydown);
    },

    beforeDestroy() {
      document.removeEventListener('keydown',this.keydown);
    }

  }
</script>


<style lang="scss">

  /* Color
-------------------------- */
  /// color|1|Brand Color|0
  $--color-primary: #409EFF !default;
  /// color|1|Background Color|4
  $--color-white: #FFFFFF !default;
  /// color|1|Background Color|4
  $--color-black: #000000 !default;
  /// color|1|Functional Color|1
  $--color-success: #67C23A !default;
  /// color|1|Functional Color|1
  $--color-warning: #E6A23C !default;
  /// color|1|Functional Color|1
  $--color-danger: #F56C6C !default;
  /// color|1|Functional Color|1
  $--color-info: #909399 !default;
  /// color|1|Font Color|2
  $--color-text-secondary: #909399 !default;
  /// color|1|Font Color|2
  $--color-text-placeholder: #C0C4CC !default;

  $--color-success-light: #e1f3d8 !default;
  $--color-warning-light: #fdf6ec !default;
  $--color-danger-light:  #fef0f0 !default;
  $--color-info-light: $--color-info !default;

  $--color-success-lighter:  $--color-success !default;
  $--color-warning-lighter:  $--color-warning!default;
  $--color-danger-lighter:  $--color-danger !default;
  $--color-info-lighter:  $--color-info!default;

  /// color||Color|0
  $--message-success-font-color: $--color-success !default;
  /// color||Color|0
  $--message-info-font-color: $--color-info !default;
  /// color||Color|0
  $--message-warning-font-color: $--color-warning !default;
  /// color||Color|0
  $--message-danger-font-color: $--color-danger !default;

  /// color||Color|0
  $--message-close-icon-color: $--color-text-placeholder !default;
  /// height||Other|4
  $--message-close-size:16px !default;
  /// color||Color|0
  $--message-close-hover-color: $--color-text-secondary !default;

  p {
    margin: 0;
  }
  .yun-message-fade-enter,
  .yun-message-fade-leave-active {
    opacity: 0;
    transform: translate(-50%, -100%);
  }

  .yun-message{
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    transition: opacity 0.3s, transform .4s, top 0.4s;
    overflow: hidden;
    padding: 15px 15px 15px 20px ;
    display: flex;
    align-items: center;

    min-width: 380px;
    box-sizing: border-box;
    border-radius: 4px;
    border:1px solid #EBEEF5;

    background-color: #edf2fc;
  }

  .is-center{
    justify-content: center;
  }
  .is-closable{
    .yun-message__content{
      padding-right: 16px;
    }
  }

  .yun-message--success{
    background-color: $--color-success-light;
    border-color: $--color-success-light;
    color: $--message-success-font-color;
    .yun-message__content {
      color: $--message-success-font-color;
    }
  }
  .yun-message--warning{
    background-color: $--color-warning-light;
    border-color: $--color-warning-light;
    color: $--message-warning-font-color;
    .yun-message__content {
      color: $--message-warning-font-color;
    }
  }
  .yun-message--error{
    background-color: $--color-danger-light;
    border-color:  $--color-danger-light;
    color: $--message-danger-font-color;
    .yun-message__content {
      color: $--message-danger-font-color;
    }
  }
  .yun-message--info{
    color: $--message-info-font-color;

    .yun-message__content {
      color: $--message-info-font-color;
    }
  }

  .yun-message__content{
    padding: 0;
    font-size: 14px;
    line-height: 1;
    &:focus {
      outline-width: 0;
    }
  }

  .yun-message__icon {
    margin-right: 10px;
  }

  .yun-message__closeBtn{
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: $--message-close-icon-color;
    font-size: $--message-close-size;

    &:focus {
      outline-width: 0;
    }
    &:hover {
      color: $--message-close-hover-color;
    }
  }

</style>
